<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nCov-全国分布图</title>
    <script src="../../static/js/echarts.min.js"></script>
    <script src="../../static/js/china.js"></script>
</head>
<body>
    <div id="container" style="width: 800px;height: 600px"></div>
    <script>
        // 将图表实例化和容器关联
        var myChart = echarts.init(document.querySelector('#container'))
        // 配置图表数据信息
        myChart.setOption({
            title:{
                // 标题
                text: 'nCov-全国实时疫情分布图',
                subtext: '疫情专题',
                left: 'center'
            },
            // 图表背景色
            backgroundColor:'#f7f7f7',
            series:[
                {
                    type: 'map',  // 当前图表类型
                    map: 'china', // 当前地图是中国地图
                    label:{
                        // 覆盖物设置
                        show: true
                    }
                }
            ],
            tooltip: {},
            visualMap:{
                type: "piecewise",
                pieces: [
                    {gt: 10000},  // (900, 1500]
                    {gt: 1000, lte: 9999},  // (310, 1000]
                    {gt: 100, lte: 999},   // (200, 300]
                    {gt: 10, lte: 99},   // (200, 300]
                    {gt: 0, lte: 9, label: '10 到 200（自定义label）'},       // (10, 200]
                ],
                inRange:{
                    color:['#faebd2','#e9a188','#d56355','#bb3937','#772526']
                }
            }
        })
    </script>
</body>
</html>